<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="商品发布"></myHead>
    <div class="title">
      <div class="tit-t">
        <img src="../../../../static/img/fabuxing.png" alt="">
        <textarea name=""  cols="30" rows="10" placeholder="输入商品标题" v-model="textVal" ></textarea>
      </div>
      <div class="tit-bot">{{textVal.length}}/30</div>
    </div>
    <div class="box-ms">
      <div class="tit-t">
        <img src="../../../../static/img/fabuxing.png" alt="">
        <textarea name=""  cols="30" rows="10" placeholder="输入商品描述（选填）"></textarea>
      </div>
      <div class="box-ms-img">
        <van-uploader v-model="fileList" result-type="dataUrl"  multiple :before-read="beforeRead" :after-read="afterRead"/>
      </div>
    </div>
    <div class="money">
        <div class="money-jg">
          <img src="../../../../static/img/fabuxing.png" alt="">
          <p>价格</p>
          <input type="text" placeholder="请输入你想售卖的价格" v-model="price">
        </div>
        <div class="money-jg">
          <p>分类</p>
          <input type="text" placeholder="请输入该商品所属的分类（如：生活用品）" v-model="classify_id">
        </div>
    </div>
    <div class="jyfs">
        <div class="jyfs-1">
          <p>交易方式</p>
          <div class="jyfs-btn">
            <p>自提</p><p>同校面交</p><p>邮寄</p>
          </div>
        </div>
        <div class="jyfs-1">
          <p>新旧程度</p>
          <div class="jyfs-btn">
            <p>全新</p><p>九成</p><p>其他</p>
          </div>
        </div>
    </div>
    <div class="btn" @click="save">确定发布</div>
<!--    <van-popup v-model="show" position="bottom">-->
<!--      <van-picker  show-toolbar :columns="columns.list" @confirm="onConfirm" @cancel="onCancel" @change="onChange"/>-->
<!--    </van-popup>-->
  </div>
</template>

<script>
  import myHead from "../lib/myHead";

  export default {
    name: "lifeTwoHandsFaBu",
    components: {
      myHead
    },
    data() {
      return {
        textVal:'',
        fileList:[],
        imgUrl:'',
        price:'',
        classify_id:0,
      }
    },
    created() {
      this.$myAxios('index/preowned/classify', 'post',{

      }).then(res => {
        console.log(res);
      });
    },
    methods:{
      beforeRead(file){
        console.log(file)
        console.log(this.fileList)
        // if (file.type !== 'image/jpeg') {
        //   console.log('请上传 jpg 格式图片');
        //   return false;
        // }
        return true;
      },
      afterRead(file){
        let src = file.file;
        console.log(src);
        let files = new FormData();
        files.append('file',src);
        this.src = files;
        this.$axios.post('http://take.zhitiaoxiaoyuan.com/api/common/upload',files,{
          headers:{
            "Content-Type":"multipart/form-data"
          }
        }).then(res=>{
          this.imgUrl.push(res.data.data.url);
          console.log(res)
        });
      },
      // onConfirm(value, index) {
      //   this.show = false;
      //   // console.log(`当前值：${value}, 当前索引：${index}`);
      //   // this.selectIndex = index;
      //   this.money = value;
      //
      // },
      save(){
        this.$myAxios('index/preowned/preowned', 'post',{
          user_id:this.$myStorage.query(),
          title:this.textVal,
          content:"",
          image:this.imgUrl,
          price:this.price,
          headline_id:1,
          way:1,
          classify_id:this.classify_id,
          degree_id:"全新"
        }).then(res => {
            console.log(res)
        });
      }
    },
    watch:{
      textVal(){
        if (this.textVal.length >= 30) {
          this.textVal = this.textVal.substring(0,30)
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }
  .title,.box-ms {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .1rem .05rem .1rem;
    margin-bottom: .1rem;
    background-color: #FFFFFF;
  }
  .tit-t {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
  }
  .tit-t>img {
    width: .08rem;
    height: .07rem;
    margin-right: .05rem;
    margin-top: .08rem;
  }
  .tit-t>textarea {
    width: calc(100% - .15rem);
    height: .5rem;
    resize: none;
    outline: none;
    border: none;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .box-ms>.tit-t>textarea {
    width: calc(100% - .15rem);
    height: .8rem;
    resize: none;
    outline: none;
    border: none;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .tit-bot {
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #CCCCCC;
    text-align: right;
  }

  .box-img-sc {
    width: .53rem;
    height: .53rem;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
    border:.01rem dashed rgba(181,181,181,1);
    margin-bottom: .1rem;
    margin-right: .06rem;
  }
  .box-img-sc>input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 0;
    border: none;
  }
  .box-img-sc>img {
    width: .15rem;
    height: .15rem;
  }
  .box-img-sc>p {
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .box-ms-img {
    font-size: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .box-ms-img>img {
    width: .53rem;
    height: .53rem;
    margin-bottom: .1rem;
    margin-right: .06rem;
  }

  .money {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: .1rem;
    padding: 0 .1rem;
    background-color: #FFFFFF;
  }
  .money-jg {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding-left: .15rem;
    display: flex;
    flex-flow: row;
    position: relative;
    align-items: center;
  }
  .money-jg:nth-child(1) {
    border-bottom: .01rem solid #E6E6E6;
  }
  .money-jg>img {
    width: .08rem;
    height: .07rem;
    position: absolute;
    left: 0;
  }
  .money-jg>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-right: .15rem;
  }
  .money-jg>input {
    width: 2.8rem;
    height: .3rem;
    font-size: .15rem;
    font-family:PingFang SC;
    font-weight:500;
    border: none;
    outline: none;
  }

  .jyfs {
    width: 100%;
    box-sizing: border-box;
    padding-left: .25rem;
    padding-right: .1rem;
    background-color: #FFFFFF;
    margin-bottom: .2rem;
  }
  .jyfs-1 {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .jyfs-1:nth-child(1) {
    border-bottom: .01rem solid #E6E6E6;
  }
  .jyfs-1>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-right: .15rem;
  }
  .jyfs-btn {
    width: 2.2rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
  }
  .jyfs-btn>p {
    width:.58rem;
    height:.22rem;
    border:.01rem solid rgba(226,226,226,1);
    border-radius:.11rem;
    text-align: center;
    line-height: .22rem;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #B3B3B3;
  }
  .btn {
    width:3.24rem;
    height:.44rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.22rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    text-align: center;
    line-height: .44rem;
    margin: 0 auto;
  }

  /*上传图片适配*/
  >>> .van-uploader__upload-icon {
    font-size: .24rem;
  }
  >>> .van-uploader__upload {
    width: .8rem;
    height: .8rem;
    margin: 0 .08rem .08rem 0;
    border-radius: .08rem;
  }
  >>> .van-uploader__preview {
    margin: 0 .08rem .08rem 0;
  }
  >>> .van-uploader__preview-image {
    width: .8rem;
    height: .8rem;
  }
  >>> .van-uploader__preview-delete {
    top: -.08rem;
    right: -.08rem;
    color: #969799;
    font-size: .18rem;
  }
  >>> .van-image-preview__index {
    top: .1rem !important;
    font-size: .14rem !important;
    text-shadow: 0 .01rem .01rem #323233 !important;
  }
  >>> .van-swipe-item {
    width: 3.75rem;
  }
</style>
